<template>
  <div>
    <Table
      bordered
      size="small"
      :columns="getFieldTableColumns()"
      :data-source="fieldList"
      :pagination="false"
      :scroll="fieldListTableScroll"
      :custom-row="fieldTableCustomRow"
    >
    </Table>
  </div>
</template>
<script lang="tsx" setup>
  import { computed, ref } from 'vue';
  import { Button, Input, Popconfirm, Switch, Table } from 'ant-design-vue';
  import {
    getDatabasesList,
    execRawSql,
    getTableList,
    getFieldsList,
    IFieldObject,
    updateOneField,
    addOneField,
    deleteOneField,
  } from '@/api/goMyAdmin';
  import { ColumnType } from 'ant-design-vue/lib/table';
  import { PlusCircleOutlined } from '@ant-design/icons-vue';

  const props = defineProps<{
    operator: (params: { text: string; index: number; record: any }) => JSX.Element;
  }>();

  /** 一个表的字段列表 */
  const fieldList = ref<goMyAdmin.workspace.TFieldObject[]>([]);

  const setListData = (list: goMyAdmin.workspace.TFieldObject[]) => {
    fieldList.value = list;
  };
  const getListData = () => {
    return fieldList.value;
  };
  const clearData = () => {
    fieldList.value = [];
  };
  /** 移除一行 */
  const removeOne = (index: number) => {
    fieldList.value.splice(index, 1);
  };

  function getSwitchColumn(record: IFieldObject, column: ColumnType<any>) {
    return (
      <Switch
        checked={record[column.dataIndex as any]}
        onUpdate:checked={(v) => {
          record[column.dataIndex as any] = v;
        }}
        checked-children="是"
        un-checked-children="否"
      />
    );
  }

  /** 字段表格的列配置 */
  function getFieldTableColumns(): ColumnType<any>[] {
    const a: ColumnType<any>[] = [
      {
        title: '字段',
        dataIndex: 'name',
        fixed: 'left',
        width: 150,
        customRender: ({ text, record, index, column }) => {
          return (
            <div class="field-plus-box">
              <div
                class="plus-box"
                onClick={() => {
                  onAddBtnClick(record, index);
                }}
              >
                <PlusCircleOutlined />
              </div>
              <Input
                value={record[column.dataIndex as any]}
                onChange={(v) => {
                  record[column.dataIndex as any] = v.target.value || '';
                }}
                allowClear={false}
                placeholder="请输入字段名"
              />
            </div>
          );
        },
      },

      {
        title: '类型',
        dataIndex: 'type',

        width: 150,
        customRender: ({ text, record, index, column }) => {
          return (
            <div>
              <Input
                value={record[column.dataIndex as any]}
                onChange={(v) => {
                  record[column.dataIndex as any] = v.target.value || '';
                }}
                allowClear={true}
                placeholder="请输入字段类型"
              />
            </div>
          );
        },
      },
      {
        title: '是否主键',
        width: 100,
        dataIndex: 'isPrimary',
        customRender: ({ text, record, index, column }) => {
          return getSwitchColumn(record, column);
        },
      },

      {
        title: '是否自增',
        width: 100,
        dataIndex: 'isAutoIncrement',
        customRender: ({ text, record, index, column }) => {
          return getSwitchColumn(record, column);
        },
      },
      {
        title: '必填',
        width: 100,
        dataIndex: 'isNotNull',
        customRender: ({ text, record, index, column }) => {
          return getSwitchColumn(record, column);
        },
      },
      {
        title: '默认值',
        dataIndex: 'default',
        customRender: ({ text, record, index, column }) => {
          return (
            <Input
              value={record[column.dataIndex as any]}
              onChange={(v) => {
                record[column.dataIndex as any] = v.target.value || '';
              }}
              allowClear
              placeholder="请输入默认值"
            />
          );
        },
      },

      {
        title: '说明',
        dataIndex: 'comment',
        customRender: ({ text, record, index, column }) => {
          return (
            <Input
              value={record[column.dataIndex as any]}
              onChange={(v) => {
                record[column.dataIndex as any] = v.target.value || '';
              }}
              allowClear
              placeholder="请输入列注释"
            />
          );
        },
      },
      {
        title: '操作',
        width: 130,
        dataIndex: 'operation',
        customRender: (params) => {
          return props.operator(params);
        },
      },
    ];
    a.forEach((i) => {
      i.align = 'center';
    });
    return a;
  }

  /** 字段表格组件，自定义行参数 */
  const fieldTableCustomRow: any = (record: goMyAdmin.workspace.TFieldObject, index: number) => {
    return {
      class: {
        'field-row-hover': true,
      },
      onClick: () => {
        // console.log(record);
      },
      onMouseEnter: () => {
        // console.log(record);
      },
      onMouseLeave: () => {
        // console.log(record);
      },
    };
  };

  /** 行添加按钮 */
  const onAddBtnClick = async (record: goMyAdmin.workspace.TFieldObject, index: number) => {
    const newRowRecord: goMyAdmin.workspace.TNewAddFieldObject = {
      name: '',
      type: 'varchar(200)',
      isAutoIncrement: false,
      isNull: false,
      isNotNull: true,
      comment: '字段说明',
      default: '',
      isPrimary: false,
      origin: { name: '' } as any,
      //  加一个字段表示新增，保存时好识别新增或修改
      isNewAdd: true,
      afterField: record.name,
    };
    fieldList.value.splice(index + 1, 0, newRowRecord);
  };

  const fieldListTableScroll = computed(() => {
    return {
      y: window.innerHeight - 206 + 'px',
    };
  });

  defineExpose({ setListData, getListData, clearData, removeOne });
</script>

<style lang="less" scoped></style>
